<template>
	<div class="article-card">
		<div class="article-card-inner">
			<div
				class="article-card-top"
				:style="bg"
				@click="goToArticle">
			</div>
			<div class="article-card-bottom">
				<div class="article-card-title">
					<span>{{ title }}</span>
				</div>
				<div class="article-card-content">
					<div class="content-top">
						<el-icon size="20"><Calendar /></el-icon>
						{{ date }} &nbsp;
						<el-icon size="20"><Star /></el-icon>
						{{ like }} &nbsp;
						<el-icon size="20"><ChatLineRound /></el-icon>
						{{ comments }} &nbsp;
						<el-icon size="20"><CollectionTag /></el-icon>
						<el-button type="warning" size="small" @click="goToType">{{ classify }}</el-button> &nbsp;
						<el-icon size="20"><Discount /></el-icon>
						<!-- 判断是否有tag，有则显示，无则显示无标签 -->
						<el-button v-if="tags.length < 1" type="primary" size="small" class=".tag-button">无标签..</el-button>
						<el-button v-else type="primary" size="small" class=".tag-button"
							v-for="tag in tags"
							:key="tag"
							@click="goToTag(tag)">{{ tag }}</el-button> &nbsp;
						<el-icon size="20"><UserFilled /></el-icon>
						<el-button type="danger" size="small" @click="goToAuthor">{{ author }}</el-button>
					</div>
					<div class="content-bottom">
						{{ content }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { computed } from 'vue';

const props = defineProps({
  img: {
    type: String,
    default: 'https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png'
  },
  title: {
    type: String,
    default: 'Title'
  },
	date: {
		type: String,
		default: '0000-00-00'
	},
  like: {
    type: Number,
    default: 0
  },
  comments: {
    type: Number,
    default: 0
  },
	classify: {
		type: String,
		default: '默认分类'
	},
	tags: {
		type: Array,
		default: []
	},
	content: {
		type: String,
		default: '## ERROR'
	},
  author: {
    type: String,
    default: 'Unknown'
  },
	author_id: {							// 作者id
		type: String,
		required: true
	},
	article_id: {				// 文章序号
		type: String,
		required: true
	}
})
// 背景图
const bg = computed(() => {
  if (props.img) {
    return {backgroundImage: "url(" + props.img + ")"}
  }
  // 默认图片
  return {backgroundImage: "url(" + ("https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png") + ")"}
})

const router = useRouter()
// 转跳文章界面
const goToArticle = () => router.push({
	name: 'article',
	query: {
		article: props.article_id
	}
})

// 转到type/tag分类
const goToType = () => {
	router.push({name: 'select', query: {type: props.classify}})
}
const goToTag = (tag) => {
  router.push({name: 'select', query: {tag: tag}})
}
// 转跳到作者主页
const goToAuthor = () => {
	router.push({name: 'user', query: {userid: props.author_id}})
}
</script>

<style scoped>
.article-card {
	height: 50rem;
	width: 85%;
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center;
}
.article-card-inner {
	display: block;
	height: 40rem;
	width: 85%;
	background-color: #fff;
	border-radius: .2rem;
	box-shadow: var(--el-box-shadow-dark);
	transition: all .2s ease-in-out 0.2s;
}
.article-card-inner:hover {
	margin-top: -2rem;
}
.article-card-top {
	height: 70%;
	width: 100%;
	border-radius: .2rem;
	background-color: aquamarine;
	overflow: hidden;
  background-position: center center;
  background-size: cover;
}
.article-card-top:hover {
	cursor: pointer;
}
.article-card-top > img {
	height: 100%;
	width: 100%;
}
.article-card-bottom {
	height: 30%;
	width: 100%;
	padding: 1.5rem;
	display: flex;
	flex-direction: row;
	justify-items: center;
}
.article-card-title {
	height: 100%;
	width: 30%;
	padding: 1.5rem;
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center;
}
.article-card-title > span {
	max-width: 100%;
	max-height: 100%;
	font-size: 30px;
	font-weight: 600;
	overflow-y: auto;
	overflow-x: hidden;
}
.article-card-title > span::-webkit-scrollbar {
	width: 5px !important;
}
.article-card-content {
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	color: #606266;
}
.article-card-content > div {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30%;
	width: 80%;
}
.content-top {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}
.content-bottom {
	overflow: hidden;
}

.el-button +.el-button {
	margin-left: 5px;
}
</style>